<!-- 首页功能入口 -->

<template>
  <div>
    <el-button type="primary" @click="add">添加入口</el-button>

    <!-- 头部 -->
    <el-row align="middle" class="topStyle">
      <el-col :span="3">
        <div>
          <span>序号</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <span>商品ID</span>
        </div>
      </el-col>
      <el-col :span="9">
        <div>
          <span>商品</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="align-content: center">
          <span>操作</span>
        </div>
      </el-col>
    </el-row>
    <!-- 列表表格集合 -->
    <div v-for="(data, index1) in tableData" :key="index1" v-loading="loading">
      <!-- 头部 -->
      <el-row type="flex" align="middle" class="itemTopStyle">
        <el-col :span="3">
          <div>
            <span>入口图标:</span>
            <el-avatar shape="circle" :size="30" :src="data.icon"></el-avatar>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <span>入口标题:</span>
            <span>{{ data.title }}</span>
          </div>
        </el-col>
        <el-col :span="9"></el-col>
        <el-col :span="6">
          <div style="align-content: center">
            <span @click="edit(data)" style="color: blue;cursor: pointer;">编辑</span>
            <span
              @click="switchStatus(data)"
              style="margin:0px 20px 0px 20px;color: blue;cursor: pointer;"
            >{{ (data.status == '1' ? '关闭入口' : '开启入口') }}</span>
            <span @click="remove(data)" style="color: blue;cursor: pointer;">删除</span>
          </div>
        </el-col>
      </el-row>

      <div style="border:1px solid lightgray;margin-bottom:20px">
        <!-- 列表单项数据 -->
        <div
          v-for="(item, index2) in data.list"
          :key="index2"
          v-show="(!contain(data.firstpageInId) || index2 < 2) ? true : false"
        >
          <el-row type="flex" align="middle" justify="center" class="topStyle2">
            <el-col :span="3">
              <div>
                <span>{{ index2 + 1 }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span>{{ item.proId }}</span>
              </div>
            </el-col>
            <el-col :span="9">
              <div style="dispaly:table;margin:0 auto;height:100px;align-content: center">
                <el-image
                  style="width:100px;height:100px;margin-right:10px;float:left;"
                  :src="item.imageUrl"
                  :fit="cover"
                  lazy
                ></el-image>
                <div style="vertical-align:middle;display:table-cell;height:100px;">
                  <p align="left" style="margin-bottom:20px;">{{ item.infoName }}</p>
                  <p align="left" style="margin-bottom:0px;">型号：{{ item.proType }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="align-content: center">
                <span @click="removeItem(item)" style="cursor: pointer;">删除</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 点击展开更多 -->
        <div
          @click="expand(data)"
          v-show="(data.list.length > 2) && (contain(data.firstpageInId))"
          align="center"
          style="padding:10px"
        >
          <span style="cursor: pointer;">点击展开更多</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.start"
      :limit.sync="listQuery.length"
      @pagination="getList"
      style="float:left;width:100%;"
    />

    <!-- 添加入口 -->
    <el-dialog append-to-body="true" title="添加入口" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="入口名称：" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题图标：" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://10.0.0.74:8090/uploadImgUrl"
            v-loading="dialogLoading"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadImg"
          >
            <img v-if="form.icon" :src="form.icon" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="关联商品分类：" :label-width="formLabelWidth">
          <el-select v-model="form.catId" clearable placeholder="请选择入口下商品分类">
            <el-option
              v-for="item in classifys"
              :key="item.catId"
              :label="item.name"
              :value="item.catId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commit">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 切换入口状态对话框 -->
    <el-dialog title="提示" append-to-body="true" :visible.sync="dialogCloseVisible" width="30%">
      <span>是否将此入口从APP首页{{ (form.status == '1') ? '开启' : '关闭' }}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCloseVisible = false">取 消</el-button>
        <el-button @click="commit" type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog title="提示" append-to-body="true" :visible.sync="dialogDeleteVisible" width="30%">
      <span>是否将此入口配置删除且从APP首页关闭？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">取 消</el-button>
        <el-button @click="deleteFunction" type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除单项对话框 -->
    <el-dialog title="提示" append-to-body="true" :visible.sync="dialogDeleteItemVisible" width="30%">
      <span>是否将此商品从该入口配置下删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteItemVisible = false">取 消</el-button>
        <el-button @click="deleteFunctionItem" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import {
  getFunctionList,
  getGoodsClassify,
  uploadImg,
  addFunction,
  updateFunction,
  deleteFunction,
  deleteFunctionItem
} from "@/api/smallRoutine";
import { log } from "util";

export default {
  components: {
    draggable,
    Pagination
  },
  data() {
    return {
      dialogCloseVisible: false,
      dialogDeleteVisible: false,
      dialogDeleteItemVisible: false,
      dialogFormVisible: false,
      dialogLoading: false,
      formLabelWidth: "150px",
      loading: true,
      // 是否为修改状态
      isModify: false,
      // 分类数据集合
      classifys: [],
      // 折叠项
      expandItems: [],
      // 分页数据
      total: 10,
      listQuery: {
        start: 1,
        length: 10
      },
      // 主页展示数据集合
      tableData: [],
      // 上传数据
      form: {
        title: "",
        icon: "",
        // 选择器id
        catId: "",
        // 入口是否展示 0:不展示 1:展示 2:删除
        status: "1",
        // id
        firstpageInId: ""
      },
      // 删除入口id
      firstpageInId: "",
      // 删除入口下商品id
      firstpageInProId: ""
    };
  },
  created() {
    this.getList();
    this.getGoodsClassify();
  },
  methods: {
    // 去添加
    add() {
      this.isModify = false;
      this.form.title = "";
      this.form.icon = "";
      this.form.catId = "";
      this.form.status = "1";
      this.dialogFormVisible = true;
    },
    // 编辑修改
    edit(data) {
      this.isModify = true;
      this.form.title = data.title;
      this.form.icon = data.icon;
      this.form.catId = data.catId;
      this.form.status = data.status;
      this.form.firstpageInId = data.firstpageInId;
      this.dialogFormVisible = true;
    },
    // 开启、关闭入口状态
    switchStatus(data) {
      this.isModify = true;
      this.form.title = data.title;
      this.form.icon = data.icon;
      this.form.catId = data.catId;
      this.form.status = data.status == "1" ? "0" : "1";
      this.form.firstpageInId = data.firstpageInId;
      this.dialogCloseVisible = true;
    },
    // 删除入口
    remove(data) {
      this.firstpageInId = data.firstpageInId;
      this.dialogDeleteVisible = true;
    },
    // 删除入口关联商品
    removeItem(data) {
      this.firstpageInProId = data.firstpageInProId;
      this.dialogDeleteItemVisible = true;
    },
    // 扩展队列是否包含某项数据
    contain(data) {
      var hasValue = false;
      this.expandItems.forEach(item => {
        if (item == data) hasValue = true;
      });
      if (hasValue) return true;
      else return false;
    },
    // 切换扩展
    expand(item) {
      this.expandItems.splice(this.expandItems.indexOf(item.firstpageInId), 1);
    },
    // 获取列表数据
    getList() {
      var params = {
        pageNum: this.listQuery.start,
        pageSize: this.listQuery.length,
        channelType: "APPLETS"
      };
      getFunctionList(params).then(response => {
        this.total = response.totalElements;
        this.tableData = response.content;
        this.loading = false;

        this.expandItems = [];
        for (let index = 0; index < this.tableData.length; index++) {
          const item = this.tableData[index];

          if (item.list.length > 2) {
            this.expandItems.push(item.firstpageInId);
          }
        }
      });
    },
    // 提交
    commit() {
      this.dialogFormVisible = false;
      this.dialogCloseVisible = false;
      if (this.form.title == "") {
        alert("请输入入口名称");
      } else if (this.form.icon == "") {
        alert("请上传标题图标");
      } else if (this.form.catId == "") {
        alert("请选择商品分类");
      } else {
        if (this.isModify) {
          updateFunction(this.form).then(res => {
            this.getList();
          });
        } else {
          var params = {
            title: this.form.title,
            icon: this.form.icon,
            catId: this.form.catId,
            status: this.form.status
          };
          addFunction(this.form).then(res => {
            this.getList();
          });
        }
      }
    },
    // 删除功能
    deleteFunction() {
      this.dialogDeleteVisible = false;
      const formData = new FormData();
      formData.append("firstpageInId", this.firstpageInId);

      deleteFunction(formData).then(res => {
        this.getList();
      });
    },
    // 删除功能下商品
    deleteFunctionItem() {
      this.dialogDeleteItemVisible = false;
      const formData = new FormData();
      formData.append("id", this.firstpageInProId);
      deleteFunctionItem(formData).then(res => {
        this.getList();
      });
    },
    // 图片相关
    handleAvatarSuccess(res, file) {
      this.form.imgUrl = URL.createObjectURL(file.raw);
    },
    // 上传过滤
    beforeAvatarUpload(file) {
      return true;
    },
    // 上传轮播图
    uploadImg(data) {
      this.dialogLoading = true;
      const formData = new FormData();
      formData.append("file", data.file);
      uploadImg(formData).then(res => {
        this.dialogLoading = false;
        this.form.icon = res.data;
      });
    },
    // 获取分类
    getGoodsClassify() {
      getGoodsClassify().then(response => {
        this.classifys = response;
      });
    }
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.topStyle {
  widows: 100%;
  margin: 10px auto;
  padding: 10px 0px 10px 0px;
  background: rgba(229, 231, 229, 0.705);
  text-align: center;
  color: black;
}
.topStyle2 {
  widows: 100%;
  height: auto;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid lightgray;
  background: white;
  text-align: center;
  color: black;
}
.itemTopStyle {
  widows: 100%;
  margin: 0px auto;
  padding: 10px 0px 10px 0px;
  background: rgba(229, 231, 229, 0.705);
  text-align: center;
  color: black;
}
.itemStyle {
  height: 200px;
  overflow: hidden;
}
.test {
  height: 200px;
  color: lightgray;
  cursor: pointer;
  background: lightgray;
}
</style>